<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="element-plus/index.css" />
		<script src="element-plus/index.full.js"></script>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		nav {
			height: 50px;
			background-color: #00c;
			color: #fff;
			font-size: 16px;
			line-height: 50px;
			padding: 0 20px;
		}
		.content {
			width: calc(100% - 200px);
			height: calc(100vh - 50px);
			border: 1px solid #f00;
			position: absolute;
			top: 50px;
			right: 0;
			padding: 20px;
		}
	</style>
	<body>
		<div id="app">
			<nav>
				<span>后台管理系统</span>
				<span style="float: right;">admin</span>
			</nav>
			<!-- 左侧菜单 -->
			<el-menu style="width: 200px;height: calc(100vh - 50px);" default-active="1" background-color="#00a"
				text-color="#fff" active-text-color="#ff0">
				<el-menu-item index="1">
					<span>用户管理</span>
				</el-menu-item>
				<el-menu-item index="2">
					<span>系统设置</span>
				</el-menu-item>
				<el-menu-item index="3">
					<span>日志管理</span>
				</el-menu-item>
			</el-menu>

			<div class="content">
				<el-card>
					<template #header>
						<span>用户管理</span>
						<el-button type="primary" style="float: right;" @click="addUser">添加用户</el-button>
					</template>
					<!-- 搜索 -->
					<el-input v-model="key" style="width: 300px;" @click="search">
						<template #append>
							<el-button @click="search">搜索</el-button>
						</template>
					</el-input>
					<!-- 表格 -->
					<el-table :data="tableDate" style="margin: 20px 0;" border>
						<el-table-column prop="id" label="id"></el-table-column>
						<el-table-column prop="name" label="姓名"></el-table-column>
						<el-table-column prop="email" label="邮箱"></el-table-column>
						<el-table-column prop="phone" label="电话"></el-table-column>
						<el-table-column prop="role" label="角色"></el-table-column>
						<el-table-column prop="status" label="状态">
							<template #default="scope">
								<el-tag v-if="scope.row.status === '启用'" type="success">{{scope.row.status}}</el-tag>
								<el-tag v-else type="danger">{{scope.row.status}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<el-button @click="show = true,form={...scope.row},current=scope.$index" size="small"
									type="primary">编辑</el-button>
								<el-button @click="del()" type="danger" size="small">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<el-pagination :total="50" layout="total, prev, pager, next, jumper">
					</el-pagination>
				</el-card>
				<!-- 弹窗 -->
				<el-dialog v-model="show" title="编辑用户" style="width: 500px;">
					<el-form ref="userForm" :rules="rules" :model="form">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="form.name"></el-input>
						</el-form-item>
					</el-form>
					<el-form ref="userForm" :rules="rules" :model="form">
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="form.email"></el-input>
						</el-form-item>
					</el-form>
					<el-form ref="userForm" :rules="rules" :model="form">
						<el-form-item label="电话" prop="phone">
							<el-input v-model="form.phone"></el-input>
						</el-form-item>
					</el-form>
					<el-form ref="userForm" :rules="rules" :model="form">
						<el-form-item label="角色" prop="role">
							<el-input v-model="form.role">
									<el-option value="管理员"></el-option>
									<el-option value="编辑"></el-option>
									<el-option value="查看者"></el-option>
							</el-input>
						</el-form-item>
					</el-form>
					<el-form ref="userForm" :rules="rules" :model="form">
						<el-form-item label="状态" prop="status">
							<el-input v-model="form.status">
								<el-option label="启用" value="启用"></el-option>
								<el-option label="禁用" value="禁用"></el-option>
							</el-input>
						</el-form-item>
					</el-form>
					<template #footer>
						<el-button @click="show = false">取消</el-button>
						<el-button @click="post" type="primary">确定</el-button>
					</template>
				</el-dialog>
			</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						show: false,
						key: '', // 搜索的关键字
						form: {}, // 表单数据
						current: 0, // 当前修改的序号
						rules: {
							name: [{
								required: true,
								message: '请输入姓名',
								trigger: 'blur'
							}],
							email: [{
								required: true,
								message: '请输入邮箱',
								trigger: 'blur'
							}],
							phone: [{
								required: true,
								message: '请输入电话',
								trigger: 'blur'
							}],
							role: [{
								required: true,
								message: '请输入角色',
								trigger: 'blur'
							}],
							status: [{
								required: true,
								message: '请输入状态',
								trigger: 'blur'
							}]
						},
						remarkData: [],
						tableDate: [{
								id: 1,
								name: '张三',
								email: "zhangsan@163.com",
								phone: "13800138001",
								role: "管理员",
								status: "启用",
							},
							{
								id: 2,
								name: '李四',
								email: "lisi@163.com",
								phone: "13800138002",
								role: "编辑",
								status: "启用",
							},
							{
								id: 3,
								name: '王五',
								email: "wangwu@163.com",
								phone: "13800138003",
								role: "查看者",
								status: "禁用",
							}
						]
					}
				},
				create() { // 初始化完成
					this.remark()
				},
				methods: {
					remark() {
						this.remarkData = JSON.parse(JSON.stringify(this.tableDate))
					},
					search() { // 搜索
						// 筛选出姓名包含关键字的数据
						this.tableDate = this.tableDate.filter(item => {
							return item.name.indexOf(this.key) >= 0 ||
								item.phone.indexOf(this.key) >= 0
						})
					},
					del(i) { // 删除
						this.$confirm("确认删除该用户?", "提示", {
							type: "warning",
							confirmButtonText: "确定",
							cancelButtonText: "取消"
						}).then(() => {
							this.tableDate.splice(i, 1)
							this.remark()
						})
					},
					post() { // 修改
						this.$refs.userForm.validate(res => {
							if (res) { // 校验通过数据
								if (!this.form.id) {
									// 添加
									const newId = this.tableDate.length > 0 ? Math.max(...this.tableDate.map(
										item => item.id)) + 1 : 1;
									this.form.id = newId;
									this.tableDate.push({
										...this.form
									});
									this.$message.success('添加成功');
								} else { // 修改
									this.tableDate[this.current] = {
										...this.form
									}; // 修改赋值
									this.$message.success("修改成功");
								}
								this.form = {}; // 清空表单
								this.current = 0;
								this.show = false; // 关闭表单
								this.remark()
							}
						});
					},
					addUser() { // 添加用户
						this.form = {}; // 初始化表单数据
						this.show = true; // 打开弹窗
					}
				}
			}).use(ElementPlus).mount('#app');
		</script>
	</body>
</html>